<template>
    <div>正在登录中，请稍候...</div>
</template>

<script setup lang="ts">
import { onMounted } from 'vue';
import { useRouter } from 'vue-router';
import axios from 'axios';
import { useUserStore } from '@/stores/user'; // 假设你有一个 user store 用于管理用户状态

const router = useRouter();
const user = useUserStore();

onMounted(async () => {
  try {
    // 从 URL 获取 GitHub 回调的查询参数
    const urlParams = new URLSearchParams(window.location.search);
    const code = urlParams.get('code');
    const state = urlParams.get('state');

    if (!code || !state) {
      alert('GitHub 回调参数缺失');
      router.push('/login'); // 缺少参数时跳转到登录页面
      return;
    }

    // 向后端发送 code 和 state 进行认证
    const res = await axios.get(`/api/user/auth/github/callback`, {
      params: { code, state },
    });
        console.log(res.data);
    if ( res.data.status === 200) {
      // 将用户信息存储到前端的状态管理中
      user.loginstatus = true;
      localStorage.setItem('token', res.data.data.token);
      user.userInfo = {
        avatar: res.data.data.user.avatar,
        username: res.data.data.user.user_name,
        id: res.data.data.user.id,
       
      };

      // 登录成功后跳转到首页
      router.push('/');
    } else {
      alert('GitHub 登录失败，请检查您的 GitHub 账户权限。');
      router.push('/login');
    }
  } catch (error) {
    console.error('GitHub 登录失败:', error);
    alert('登录失败，请重试');
    router.push('/login');
  }
});
</script>

<style scoped>
/* 可根据需要进行样式设计，例如添加加载动画 */
div {
  text-align: center;
  margin-top: 20px;
  font-size: 18px;
  color: #333;
}
</style>
